<template>
  <div ref="myCharts" style="width: 100%; height: 100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'EchartTreemap',
    props: {
        treeData: { type: Array, default: function() { return [] } },
        color: { type: Array, default: function() { return [] } }, // 颜色
        tooltipFormatter: { type: [String, Function], default: null }, // hover提示内容格式化 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
        clickFn: { type: Function, default: null } // hover提示内容格式化 {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        treeData: {
            deep: true,
            handler() {
                this.creatEcharts()
            }
        }
    },
    created() {
        window.addEventListener('resize', this.onresize)
        this.$bus.on('toggleClick', () => {
            setTimeout(() => {
                this.$nextTick(() => {
                    this.onresize()
                })
            }, 300)
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onresize)
        this.$bus.off('toggleClick', this.onresize)
    },
    mounted() {
        this.creatEcharts()
        setTimeout(() => {
            this.onresize()
        }, 300)
    },
    methods: {
        creatEcharts() {
            const myChart = echarts.init(this.$refs.myCharts)
            this.myChart = myChart
            myChart.on('click', this.clickFn)
            const option = {
                color: this.color,
                tooltip: {
                    formatter: this.tooltipFormatter
                },
                series: [
                    {
                        width: '100%',
                        height: '100%',
                        type: 'treemap',
                        label: {
                            show: true,
                            formatter: '{b}'
                        },
                        upperLabel: {
                            show: true
                        },
                        levels: [
                            {
                                itemStyle: {
                                    // 一级间间隔线
                                    borderColor: '#777',
                                    borderWidth: 0,
                                    gapWidth: 1
                                },
                                upperLabel: {
                                    show: false
                                }
                            },
                            {
                                colorSaturation: [0.5, 0.5],
                                itemStyle: {
                                    borderWidth: 5,
                                    gapWidth: 1,
                                    borderColorSaturation: 0.4
                                }
                            },
                            {
                                colorSaturation: [0.6, 0.6],
                                itemStyle: {
                                    borderWidth: 5,
                                    gapWidth: 1,
                                    borderColorSaturation: 0.5
                                }
                            }
                        ],
                        data: this.treeData,
                        breadcrumb: {
                            show: false
                        }
                    }
                ]
            }
            myChart.setOption(option, true)
        },
        onresize() {
            if (this.myChart !== null) {
                this.myChart.resize()
            }
        }
    }
}
</script>

<style scoped lang="scss">

</style>
